{% extends 'index.html' %} 
{% block ace-content %} 
<!-- Search -->   
<link rel="stylesheet" href="/static/dist/css/jquery-ui.min.css">
<script src="/static/dist/js/jquery-ui.min.js"></script> 
{% endblock %}
{%block page-content %}
<div id="page-wrapper">

	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header">
				<i class="fa fa-tasks"></i>&nbsp;
				<code>Celery任务运行日志</code>
			</h1>
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<div class="row">
		<div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                            	<i class="fa fa-search-plus"></i> 查询类型 
                </div>
                        
                <div class="panel-body">
				


				   <div class="row" >
				      <div class="col-xs-6 col-sm-3">
							<div class="form-group">
								<label class="col-sm-3 control-label">任务名称:</label>
								<div class="col-sm-8">
									 <select class="form-control" id="selName" >
									 	<option selected="selected" value="">请选择一个名称</option>
									 	{% for task in regTaskList %}
									 		<option value="{{task}}" name="name">{{task}}</option>
									 	{% endfor %}			
									</select>
								</div>
							</div>
				      </div>
				      <div class="col-xs-6 col-sm-3">
							<div class="form-group">
								<label class="col-sm-3 control-label">任务状态:</label>
								<div class="col-sm-8">
									 <select class="form-control" id="selstate" >
									 	<option selected="selected" value="">请选择一个类型</option>
									 	<option value="SUCCESS" name="state">SUCCESS</option>	
									 	<option value="STARTED" name="state">STARTED</option>	
									 	<option value="FAILURE" name="state">FAILURE</option>		
									 	<option value="REVOKED" name="state">REVOKED</option>	
									 	<option value="RECEIVED" name="state">RECEIVED</option>	
									 	<option value="PENDING" name="state">PENDING</option>	
									 	<option value="RETRY" name="state">RETRY</option>	
									</select>
								</div>
							</div>
				      </div>
				
				      <div class="col-xs-6 col-sm-3">
							<div class="form-group">
								<label class="col-sm-3 control-label">Worker:</label>
								<div class="col-sm-8">
									 <select class="form-control" id="worker_id" >
									 	<option selected="selected" value="">请选择一个类型</option>
									 	{% for w in workList %}
									 		<option value="{{w.id}}" name="worker_id">{{w.hostname}}</option>
									 	{% endfor %}																
									</select>
								</div>
							</div>
				      </div>
				
				      <div class="col-xs-6 col-sm-3">
							<div class="form-group">
								<label class="col-sm-3 control-label">执行时间:</label>
								<div class="col-sm-8">
									<input type="text" id="runtime" name="runtime" style="border:0; color:#f6931f; font-weight:bold;">
									<div id="runtime-range"></div>
								</div>
							</div>
				      </div>	   
				   </div>   			                                                                
		                                                                      
                        
                    </div>
                </div>        
            </div>	
	</div>
	
	<div class="row">
		<div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                            <i class="fa fa-check "></i> 已选条件
                </div>
                        
                <div class="panel-body">
                        <div id="divSelectedType">
                        </div>
                </div>
            </div>
         </div> 	
	</div>
	
	<div class="row">

	
	
		<div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                           <i class="fa fa-tasks "></i> 结果列表
                </div>
                        
                <div class="panel-body">
                	<div id="div-search-result" style="display:none;">
                		<div class="col-lg-10">
                		</div>                       
                        <div>
							<table   width="100%" class="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-Search">						
	                                <thead>
											<tr>
												<th class="col-sm-3">
													<label>
														<span class="lbl"></span>
													</label>
													任务ID
												</th>
												<th>任务名</th>
												<th>任务参数</th>
												<th class="hidden-480">任务时间</th>
					
												<th>
													<i class="icon-time bigger-110 hidden-480"></i>
													花费时间(sec)
												</th>
					
												<th class="text-center">任务状态</th>
					
												<th class="text-center">操作</th>
											</tr>
									        <tfoot>
									            <tr>
													<th class="col-sm-3">
														<label>
															<span class="lbl"></span>
														</label>
														任务ID
													</th>
													<th>任务名</th>
													<th>任务参数</th>
													<th class="hidden-480">任务时间</th>
						
													<th>
														<i class="icon-time bigger-110 hidden-480"></i>
														花费时间(sec)
													</th>
						
													<th class="text-center">任务状态</th>
						
													<th class="text-center">操作</th>
									            </tr>
									        </tfoot>										    
	                                </thead>
	                       	</table>
                       	</div>
                   </div>                   
                </div>
            </div>
         </div>	
	
</div>


			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myViewLogModal" tabindex="-1" role="dialog" aria-labelledby="myViewLogModalLabel" aria-hidden="true">
				<div class="modal-dialog" style="width:800px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myViewLogModalLabel">
								任务详细信息
							</h4>
						</div>
						<div class="modal-body">
							<div id="viewLog" class="row">
							
														
							
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>							
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>

</div>

<script type="text/javascript">

	$('#selName').change(function () {
	    if ($('#selName').val() != "") {
	        $("#hdnname").val($('#selName').val());
	        var span = "<span class='label label-success' id='spanName'>" + $("#selName").find("option:selected").text()
	        + " <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='name' type='hidden' value='"
	        + $('#selName').val() + "' /></span> &nbsp;";
	        if ($("#spanName").length == 0) {
	            $('#divSelectedType').append(span);
	        }
	        else {
	            $("#spanName").html($("#selName").find("option:selected").text()
	             + " <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='name' type='hidden' value='"
	             + $('#selName').val() + "' /></span> &nbsp;");
	        }
	        changepage(1);
	    }
	})
	
     $('#worker_id').change(function () {
         if ($('#worker_id').val() != "") {
             $("#hdnLine").val($('#worker_id').val());
             var span = "<span class='label label-success' id='spanWorker'>" + $("#worker_id").find("option:selected").text()
             + " <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='worker_id' type='hidden' value='"
             + $('#worker_id').val() + "' /></span> &nbsp;";
             if ($("#spanWorker").length == 0) {
                 $('#divSelectedType').append(span);
             }
             else {
                 $("#spanWorker").html($("#worker_id").find("option:selected").text()
                  + " <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='worker_id' type='hidden' value='"
                  + $('#worker_id').val() + "' /></span> &nbsp;");
             }
             changepage(1);
         }
     })	
     
     $('#selstate').change(function () {
         if ($('#selstate').val() != "") {
             $("#hdnstate").val($('#selstate').val());
             var span = "<span class='label label-success' id='spanstate'>" + $("#selstate").find("option:selected").text()
             + " <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='state' type='hidden' value='"
             + $('#selstate').val() + "' /></span> &nbsp;";
             if ($("#spanstate").length == 0) {
                 $('#divSelectedType').append(span);
             }
             else {
                 $("#spanstate").html($("#selstate").find("option:selected").text()
                  + " <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='state' type='hidden' value='"
                  + $('#selstate').val() + "' /></span> &nbsp;");
             }
             changepage(1);
         }
     }) 	

	$("#runtime-range").slider({
	    range: "min",
	    value: 0,
	    min: 0,
	    max: 3600,
	    values: [0,3600],
	    slide: function (event, ui) {
	        if (ui.values[0] != ui.values[1]) {
	            $("#runtime").val(ui.values[0] + " - " + ui.values[1] + "秒");
	        }
	        else {
	            $("#runtime").val(ui.values[0] + "秒");
	        }
	    },
	    change: function (event, ui) {
	        var span = "<span class='label label-success' id='spanTaskTime'>消耗时间：" + ui.values[0] + "-" + ui.values[1] +
	         "秒 <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='runtime' type='hidden' value='"
	         + ui.values[0] + "-" + ui.values[1] + "' /></span> &nbsp;";
	        if ($("#spanTaskTime").length == 0) {
	            $('#divSelectedType').append(span);
	        }
	        else {
	            $("#spanTaskTime").html("消耗时间：" + ui.values[0] + "-" + ui.values[1] +
	             "秒  <img alt='' src='/static/img/close.png' onclick='removeself(this)' /><input name='runtime' type='hidden' value='"
	         + ui.values[0] + "-" + ui.values[1] + "' /></span> &nbsp;");
	        }
	        changepage(1);
	    }
	});

    function search_go() {
        var parameter = {};
        $("input[type='hidden']").each(function () {
            var key = $(this).prop('name');
            var value = $(this).val();
            parameter[key] = value;
        })

        var count = 0;
        for (var i in parameter) {
            count += i;
            break;
        }
        if (count == 0) {
            return false;
        }

        $.post('/task_search/', parameter, function (result) {
            if (result["data"].length > 0) {
            	document.getElementById("div-search-result").style.display = "";
					 var table = $('#dataTables-Search').dataTable();
					 oSettings = table.fnSettings();
					 table.fnClearTable(this);
					 for (var i=0; i<result["data"].length; i++)
					 {
					   table.oApi._fnAddData(oSettings, result["data"][i]);
					 }
					 oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
					 table.fnDraw();                	               	
            }
            else{
            	//没有数据就清空
            	var table = $('#dataTables-Search').dataTable();
            	table.fnClearTable(this);
            }
        })
    }

    function changepage(pageindex) {
        curpage = pageindex;
        search_go();
    }

    function removeself(obj) {
        $(obj).parent().remove();
        changepage(1);
    }	

	$(document).ready(function() {
	    $('#taskTableList').DataTable();
	} ); 
	function onBtnViewTaskLog(obj, id,task_id,op){
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		$.ajax({
			dataType: "JSON",
			url:'/task_view/', //请求地址
			type:"POST",  //提交类似
			data:{
				"id":id,
				"op":op,
				"task_id":task_id
			},
			success:function(response){
				btnObj.removeAttr('disabled');
				if (response["code"] == 200){
					var viewHmtl = '<form class="form-horizontal"><div class="form-group">' +
										'<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>任务名*</strong></label>' +					
											'<div class="col-sm-5"><input  type="text" class="form-control"   value="'+
											response['data']['name'] +
											'" placeholder="更新宿主机xxx" name="task" disabled/></div></div>' +
											
				
									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>任务Id*</strong></label>' +
										'<div class="col-sm-5"><input  type="text" class="form-control"   value="'+
											 response['data']['task_id']  +
										'" placeholder="任务Id" name="task" disabled/></div></div>' +
				
									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>任务状态*</strong></label>' +
										'<div class="col-sm-5"><button type="button" class="btn btn-default">' + 
											response['data']['state'] +  												
										'</button></div></div>' +

									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>字典参数*</strong></label>' +
										'<div class="col-sm-5"><textarea class="form-control" rows="3" id="kwargs" >' + 
											response['data']['kwargs'] + 
										'</textarea></div></div>' +										
										
									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>列表参数*</strong></label>' +
											'<div class="col-sm-5"><textarea class="form-control" rows="3" >' + 
											response['data']['args'] + 
										'</textarea></div></div>' +
				
										
									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>任务结果*</strong></label>' +
											'<div class="col-sm-5"><textarea class="form-control" rows="4" >' + 
											response['data']['result'] + 
										'</textarea></div></div>' +										

									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>执行时间*</strong></label>' +
											'<div class="col-sm-5"><h4><code>' + 
											response['data']['tstamp']  +  												
										'</h4></code></div></div>' +										
										
									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>花费时间*</strong></label>' +
											'<div class="col-sm-5"><h4><code>' + 
											response['data']['runtime']  +  												
										'</code></h4></div></div>' +	

									'<div class="form-group"><label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>Worker*</strong></label>' +
											'<div class="col-sm-5"><h4><code>' + 
											response['data']['worker']  +  												
										'</code></h4></div></div>' +												
									'</div>' +
								'</div></form>' 
					document.getElementById('viewLog').innerHTML = viewHmtl;
/* 					var songResJson=JSON.parse(document.getElementById('kwargs').value);
					alert(songResJson);
	    			$("#kwargs").text(JSON.stringify(songResJson,null,2));  */
					
				}
				else {
					var viewHmtl = response['msg'];
					document.getElementById('viewLog').innerHTML = viewHmtl;
				}
				
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');

	    	}
		})
}	
	function onBtnHandleTaskLog(obj, id,task_id,op){
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		if (op == 'delete'){
			var txt =  "是否确认删除("+ task_id +")？";
			var title = '删除任务' 
		}
		else if(op == 'kill'){
			var txt=  "是否终止任务("+ task_id +")？";
			var title = '终止任务' 
		}
			
		var option = {
				title: title,
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
							dataType: "JSON",
							url:'/task_view/', //请求地址
							type:"POST",  //提交类似
							data:{
								"id":id,
								"op":op,
								"task_id":task_id
							},
					      success:function(response){			            
				                if (response["code"]=="200"){ 
				                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
									
				                }
					        	else{
					        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					        	}						                
						},
			            error:function(response){
			            	window.wxc.xcConfirm("操作失败", window.wxc.xcConfirm.typeEnum.error);
			            },		
						});
				},
				onCancel:function(){	
				},
				onClose:function(){
				}
			}			
		window.wxc.xcConfirm(txt, "custom", option);		
}	
</script>

{% endblock %}
